<template>
  <div class="contenttable">
    <div class="headersearch">
      <div class="displayflex left">
        <div class="title">项目名称：</div>
        <Select
          v-model="checked"
          :checkList1="checkList"
          :isTable="false"
          :isSearch="true"
        />
      </div>

      <div class="displayflex right">
        <div class="setting666 displayflex">
          <i
            v-if="isTop"
            class="el-icon-refrigerator"
            @click="onSetIsTop(false)"
          />
          <i
            v-else
            class="el-icon-c-scale-to-original"
            @click="onSetIsTop(true)"
          />
        </div>

        <div class="datetab displayflex">
          <div
            :class="dataType === '天' ? 'chose' : ''"
            @click="choseDateType('天')"
          >
            天
          </div>
          <div
            :class="dataType === '日期' ? 'chose' : ''"
            @click="choseDateType('日期')"
          >
            日期
          </div>
        </div>
        <div class="datepick">
          <!-- 日期 -->
          <el-date-picker
            key="日期"
            v-if="dataType === '日期'"
            v-model="value2"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="small"
            style="width: 250px"
          />
           <!-- 时间 -->
          <el-date-picker
            key="天"
            v-else
            v-model="value3"
            type="date"
            size="small"
            style="width: 250px"
          />
          <!-- 时间 -->
          <!-- <div class="timer" v-else>
            <el-time-select
              size="small"
              placeholder="开始时间"
              v-model="startTime"
              style="width: 117px"
              :picker-options="{
                start: '00:00',
                step: '00:60',
                end: '24:00',
              }"
            >
            </el-time-select>
            <div>
              -
            </div>
            <el-time-select
              size="small"
              placeholder="结束时间"
              v-model="endTime"
              style="width: 117px"
              :picker-options="{
                start: '00:00',
                step: '00:60',
                end: '24:00',
                minTime: startTime,
              }"
              :disabled="!this.startTime"
            >
            </el-time-select>
          </div> -->
        </div>
      </div>
    </div>
    <template v-if="!isTop">
      <div
      class="bottomsearch2"
      v-for="item in checked"
      :key="item"
    >
      <div class="">
        <Chart :title="item" :data="handleChildrenData(dataAll, item)" />
      </div>
      <div>
        <Table :title="item" :data="handleChildrenData(dataAll, item)" :params="params" :dataType="dataType" />
      </div>
    </div>
    </template>
    
    <template v-else>
      <div
      class="bottomsearch1"
      v-for="item in checked"
      :key="item"
    >
      <div class="">
        <Chart :title="item" :data="handleChildrenData(dataAll, item)" />
      </div>
      <!-- <div>
        <Table :title="item" :data="handleChildrenData(dataAll, item)" />
      </div> -->
    </div>
    <div
      class="bottomsearch3"
      v-for="(item,i) in checked"
      :key="item + i"
    >
      <!-- <div class="">
        <Chart :title="item" :data="handleChildrenData(dataAll, item)" />
      </div> -->
      <div>
        <Table :title="item" :data="handleChildrenData(dataAll, item)" :params="params" :dataType="dataType" />
      </div>
    </div>
    </template>
    
  </div>
</template>

<script>
import Table from "./TableComponents/Table.vue";
import Chart from "./TableComponents/Chart.vue";
import Select from "./TableComponents/Select.vue";
import { projects, powerTradingData, dailySummary } from "@/api/table";
import moment from "moment";

function debounce(fn, delay) {
  let timer = null;
  return function (...args) {
    timer = setTimeout(
      () => {
        typeof fn === "function" && fn.apply(null, args);
        clearTimeout(timer);
      },
      delay > 0 ? delay : 100
    );
  };
}

export default {
  components: {
    Table,
    Chart,
    Select,
  },
  data() {
    return {
      dataType: "天",
      value2: [],
      value3: '',
      recordDate: '',
      dataRange: [],
      valueTime: [],
      startTime: "",
      endTime: "",
      checkList: [
        // {
        //   label: "项目一",
        //   color: "#017efa",
        // },
        // {
        //   label: "项目二",
        //   color: "#017efa",
        // },
        // {
        //   label: "项目三",
        //   color: "#017efa",
        // },
      ],
      checked: [],
      dataAll: [],
      params: {},
    };
  },

  created() {
    this.initSearch()
    this.$store.commit("setting/initSwipers");
    this.getCheckList();
  },
  watch: {
    // isTop(val) {
    //   console.log(val, "val");
    // },
    checked() {
      if (this.dataType === '天') {
          this.getPowerTradingData()
      }else if (this.dataType === '日期') {
          this.getDailySummary()
      }
    },
    dataType(val){
      if (val === '天') {
          this.getPowerTradingData()
      }else if (val === '日期') {
          this.getDailySummary()
      }
    },
    value2(val) {
      this.onChangeDate(val)
    },
    value3(val) {
      this.onChangeDateOne(val)
    },
    // valueTime(val) {
    //   console.log(val, "时间变化了--------------");
    // },
    // startTime(val) {
    //   this.endTime = ''
    // },
    // endTime(val) {
    //   console.log(this.startTime);
    //   if(this.startTime && val){
    //     this.valueTime = [this.startTime, val]
    //   }
    // },
  },
  mounted() {},
  computed: {
    isTop() {
      return this.$store.state.setting.isTop;
    },
  },
  methods: {
    initSearch(){
      // this.startTime = '00:00'
      // this.endTime = '24:00'
      this.value2 = [moment().subtract(1, 'month').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]
      this.value3 = moment().format('YYYY-MM-DD')
      this.dataType = '日期'
    },
    handleChildrenData(ll, val){
      console.log(ll, val,'ll, val-------------');
      const obj = ll.find(item => item.projectName === val)
      if (obj) {
        return obj.dailySummaryList || obj.powerTradingDataList

      }else {
        return []
      }
    },
    async getCheckList() {
      const data = await projects()
      // const data = [
      //   {
      //     projectId: "1", // 项目id
      //     companyId: "1", // 所属公司
      //     projectName: "周覃", //项目名称
      //   },
      // ];
      this.checkList = data.map((item) => {
        return {
          ...item,
          label: item.projectName,
          color: "#017efa",
        };
      });
      this.checked = [this.checkList[0].label];
    },
    // 按天维度获取用电数据
    async getPowerTradingData(){
      const projectIds = this.checkList.filter(item => this.checked.includes(item.label)).map(item => item.projectId).toString()
      if (projectIds) {
        const params = { projectIds, recordDate: this.recordDate }
        this.params = params
        const res = await powerTradingData(params)
        this.dataAll = res || []
      }else{
        this.params = null
        this.dataAll = []
      }
      
    },
    // 日期
    async getDailySummary(){
      const projectIds = this.checkList.filter(item => this.checked.includes(item.label)).map(item => item.projectId).toString()
      if (projectIds) {
        const params = { projectIds, startDate: this.dataRange[0], endDate: this.dataRange[1] }
        this.params = params
        const res = await dailySummary(params)
        this.dataAll = res || []
      }else{
        this.params = null
        this.dataAll = []
      }
      
    },
    choseDateType(val) {
      this.dataType = val;
    },
    onChangeDate(val) {
      const start = moment(val[0]).format("YYYY-MM-DD");
      const end = moment(val[1]).format("YYYY-MM-DD");
      this.dataRange = [start, end]
      this.getDailySummary()
    },
    onChangeDateOne(val) {
      const date = moment(val).format("YYYY-MM-DD");
      this.recordDate = date
      this.getPowerTradingData()
    },
    onChangeTime(val) {
      console.log(val, "onChangeTime---------");
    },
    onSetIsTop(val) {
      this.$store.commit("setting/updateSwiper", { val, type: "isTop" });
    },
  },
};
</script>
<style lang="scss" scoped>
.contenttable {
  background-color: #f8f9ff;
  width: 100%;
  height: 100%;
  min-width: 1000px;
  overflow: auto;
  .title {
    text-wrap: nowrap;
  }
  .left {
    width: calc(100% - 436px);
  }
  .right {
    // width: fit-content;
    width: 436px;
    justify-content: end;
    overflow: hidden;

    .setting666 {
      margin-right: 8px;
      cursor: pointer;
      > i {
        font-size: 24px;
        color: #1082fa;
      }
    }
  }

  .headersearch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    height: 60px;
    background: #ffffff;
    margin: 12px;
    .displayflex {
      display: flex;
      align-items: center;
    }
    .datepick {
      margin-left: 8px;
      .timer{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 250px;
        :nth-child(2){
          margin: 0 4px;
        }
      }
    }
    .datetab {
      background: #f5f7fb;
      width: 150px;
      height: 32px;
      border-radius: 4px;
      padding: 4px;
      font-size: 16px;
      color: #a8acb2;
      > div {
        width: 70px;
        text-align: center;
        cursor: pointer;
      }
      .chose {
        background: #ffffff;
        height: 28px;
        line-height: 28px;
        border-radius: 4px;
        color: #1082fa;
        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
      }
    }
  }

  .bottomsearch1 {
    // height: calc(50% - 42px);
    height: 400px;
    // border-radius: 4px;
    // height: calc(100% - 84px);
    > div {
      padding: 12px;
      background: #ffffff;
      // height: 100%;
      height: calc(100% - 24px);
      // height: calc(50% - 24px);
      width: calc(100% - 48px);
      margin: 12px;
      border-radius: 4px;
      padding-bottom: 0;
    }
  }

  .bottomsearch3 {
    // height: calc(50% - 42px);
      height: fit-content;
    // border-radius: 4px;
    // height: calc(100% - 84px);
    > div {
      padding: 12px;
      background: #ffffff;
      height: 100%;
      // height: calc(100% - 24px);
      // height: calc(50% - 24px);
      width: calc(100% - 48px);
      margin: 12px;
      border-radius: 4px;
      padding-bottom: 0;
    }
  }

  .bottomsearch2 {
    height: 400px;
    display: flex;
    justify-content: space-between;
    > div {
      padding: 12px;
      background: #ffffff;
      // height: calc(50% - 24px);
      width: 48%;
      // width: calc(100% - 24px);
      margin: 12px;
      border-radius: 4px;
      padding-bottom: 0;
    }
  }
  // >div{
  //     padding: 12px;
  //     width: 50%;
  // }
}
</style>
